<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Counter Example</title>
<style>
  #counter {
    font-size: 2em;
    color: blue;
  }
</style>
</head>
<body>
<div id="app">
  <p id="counter">0</p>
  <button id="increment">Increment</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 获取元素
  var counterElement = document.getElementById('counter');
  var incrementButton = document.getElementById('increment');

  // 初始计数值
  var count = parseInt(counterElement.textContent, 10);

  // 绑定事件处理函数
  incrementButton.addEventListener('click', function() {
    count += 1; // 增加计数值
    counterElement.textContent = count; // 更新显示的计数值
    counterElement.style.color = 'green'; // 修改样式
  });
});
</script>
</body>
</html>